<template>
  <div style="margin-top: 20px;margin-left: 10px">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/main/echarts' }"><b>首页</b></el-breadcrumb-item>
      <el-breadcrumb-item><b>航班信息管理</b></el-breadcrumb-item>
      <el-breadcrumb-item>航班变更申请</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="flight-change-application" >


    <!-- 添加标题 -->

    <el-main class="content" style="margin-top: 51px">
      <h3 style="color: #337ab7; /* 蓝色标题 */
                  border-bottom: 2px solid #337ab7; /* 标题下划线 */
                  padding-bottom: 10px;
                  margin-bottom: 20px;">航班变更申请</h3>
      <el-form ref="form" :model="flightchangeform" @submit.native.prevent="submitApplication" label-width="100px">

        <el-form-item label="航班编号" prop="FFID">
          <el-input placeholder="请输入航班编号" v-model="flightchangeform.FFID" :rules="[{ required: true, message: '请输入航班编号', trigger: 'blur' }]"></el-input>
        </el-form-item>

        <el-form-item label="原定日期">
          <el-date-picker
              v-model="localDepartureODate"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="变更原因">
          <el-select v-model="flightchangeform.REASON" placeholder="请选择">
            <el-option label="天气原因" value="天气原因"></el-option>
            <el-option label="机械故障" value="机械故障"></el-option>
            <el-option label="其他原因" value="其他原因"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="变更日期">
          <el-date-picker
              v-model="localDepartureEDate"
              type="date"
              placeholder="选择变更日期">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="变更详情" prop="changeDetails">
          <el-input
              type="textarea"
              v-model="flightchangeform.DETAIL"
              placeholder="请输入变更详情"
              :rows="4">
          </el-input>
        </el-form-item>
        <!-- 辅助信息或提示 -->
        <div class="form-tips">
          <p>请确保所有信息准确无误</p>
        </div>
        <el-form-item>
          <el-button type="primary" @click="submitApplication" style="width: 300px;margin-left: 35px">提交申请</el-button>
        </el-form-item>


      </el-form>
    </el-main>
  </div>
</template>


<script setup>
import request from "@/utils/request";
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";



let userstr = sessionStorage.getItem('username')
const token = JSON.parse(userstr).token

// 用于存储选定的本地出发日期的引用
const localDepartureODate = ref(new Date()); // 初始化为当前日期/时间
const localDepartureEDate = ref(new Date()); // 初始化为当前日期/时间
const submitApplication=() =>{
  //alert("你好丁真")

  const formatODATE = localDepartureODate.value.toLocaleDateString();
  const formatCDATE = localDepartureEDate.value.toLocaleDateString();

  request({
    url: '/info/flightchange/addflightChange',
    method: 'post',
    params: {
      ...flightchangeform,
      ODATE:  formatODATE, // 将本地时间转换为 UTC
      CDATE:  formatCDATE // 将本地时间转换为 UTC
    },
    headers: {
      'token': token
    }
  }).then(res => {
    if (res.data.data) {
      ElMessage({
        type: 'success',
        message: '申请成功'
      })
    } else {
      ElMessage({
        type:'error',
        message: '申请失败:请补全申请信息，再次尝试'
      })
    }
  })

}

//数据提交数据模型
const flightchangeform = reactive({
  FFID : '',
  ODATE : '',
  CDATE : '',
  REASON : '',
  DETAIL : ''
})

</script>

<style scoped>
/* 添加标题样式 */
.page-title {
  font-size: 24px; /* 标题字体大小 */
  color: #333; /* 标题字体颜色 */
  text-align: center; /* 标题居中对齐 */
  margin-bottom: 20px; /* 标题与表单之间的间距 */
  font-weight: bold; /* 标题加粗 */
}
/* 辅助信息样式 */
.form-tips {
  background-color: #f5f5f5; /* 浅灰色背景 */

  color: #666; /* 字体颜色 */
  padding: 10px 30px; /* 内边距 */
  margin-top: 20px; /* 与表单的外边距 */
  margin-bottom: 10px;
  border-radius: 4px; /* 边框圆角 */
  font-size: 14px; /* 字体大小 */
}

.form-tips p {
  margin: 0 0 10px; /* 段落之间的间距 */
}
/* 主要内容区域 */
.content {
  max-width: 600px;
  margin: 15px auto;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

body {
  background: linear-gradient(to right, #3498db, #2c3e50);
}

.flight-change-application {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.el-breadcrumb__inner a {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 768px) {
  .flight-change-application {
    padding: 10px;
  }

}
/* 表单元素样式 */
.el-form-item label {
  font-weight: bold;
  font-size: 16px;
}
el-input {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  font-size: 14px;
}

el-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

/* 使用 ::v-deep 来确保样式穿透Element组件的作用域 */
::v-deep(.el-button) {
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
  outline: none;
}

::v-deep(.el-button--primary) {
  background-color: #3498db; /* 主按钮背景色 */
  border-color: #3498db; /* 主按钮边框色，Element Plus的按钮背景色和边框色一致 */
  color: white; /* 文字颜色 */
  margin-left: 80px;

}

::v-deep(.el-button--primary:hover) {
  background-color: #2980b9; /* 鼠标悬停时的背景色 */
  border-color: #2980b9; /* 鼠标悬停时的边框色 */
}

::v-deep(.el-button--primary:focus) {
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.5); /* 聚焦时的阴影效果 */
}

::v-deep(.el-button--primary:active) {
  background-color: #2874A6; /* 点击时的背景色 */
  border-color: #2874A6; /* 点击时的边框色 */
}
/* 添加侧边栏样式 */
sidebar {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 200px;
  background: #f8f9fa;
  padding: 20px;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
  border-radius: 0 8px 8px 0;
}
/* 卡片布局样式 */
card {
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}
/* 优化间距和边距 */
el-form-item {
  margin-bottom: 20px; /* 调整表单项之间的间距 */
}
</style>

